<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { bucketsDeleteService } from '@/api/buckets'

const router = useRouter()
const route = useRoute()

// 接收传递参数
const bucketName = route.query.name

// 默认选择目录项
router.replace(`/buckets/show/summary?name=${bucketName}`)

// 删除存储桶
const onDeleteBucket = async () => {
  await ElMessageBox.confirm('你确定要删除该桶么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  await bucketsDeleteService(bucketName)
  router.replace('/buckets')
}


</script>

<template>
  <el-container>
    <el-header style="border-bottom: 1px solid rgb(229, 229, 229)">
      <span style="display: flex; align-items: center;">
        <el-icon size="50" style="margin-right: 5px;">
          <svg t="1733367675151" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13948"><path d="M512 108.7488S296.192 251.3408 168.1408 173.7216c-2.9184 0 21.3504 484.9664 60.1088 562.5856 38.8096 77.6192 283.6992 178.944 283.6992 178.944s240.0768-98.9184 281.088-178.944c41.0112-80.0256 60.8256-560.64 63.0272-562.5856C713.216 258.0992 512 108.7488 512 108.7488z m78.0288 396.032v28.2112h-60.3136v49.8176l48.4864 21.7088v15.4112h-48.4864v80.5376l-36.0448 48.7936V442.3168c-36.0448-8.2944-62.9248-40.4992-62.9248-79.104 0-44.8512 36.352-81.2544 81.2544-81.2544s81.2544 36.352 81.2544 81.2544c0 38.7584-27.136 71.1168-63.488 79.2064v62.3104h60.2624z" p-id="13949"></path></svg>
        </el-icon>
        <div>
          <div style="font-size: 22px;"><strong>{{ bucketName }}</strong></div>
          <div><el-text size="small">IAM 策略</el-text></div>
        </div>
        <div style="flex: 1; display: flex; justify-content: flex-end;">
          <el-button size="large" type="danger" @click="onDeleteBucket">
            删除存储桶
          </el-button>
          <el-button size="large" color="black" @click="$router.push('/buckets/objects?path=/' + bucketName)">
            浏览存储桶
          </el-button>
        </div>
      </span>
    </el-header>
    <el-container style="margin-top: 15px;">
      <el-aside width="14vw" style="background-color: whitesmoke;">
        <el-menu
          active-text-color="#ffd04b"
          background-color="whitesmoke"
          :default-active="'/buckets/show/summary?name=' + bucketName"
          router
        >
          <el-menu-item style="border-bottom: 1px solid rgb(229, 229, 229)" :index="'/buckets/show/summary?name=' + bucketName">
            <span>总结</span>
          </el-menu-item>
          <el-menu-item style="border-bottom: 1px solid rgb(229, 229, 229)">
            <span>生命周期</span>
          </el-menu-item>
          <el-menu-item style="border-bottom: 1px solid rgb(229, 229, 229)">
            <span>总结</span>
          </el-menu-item>
          <el-menu-item style="border-bottom: 1px solid rgb(229, 229, 229)">
            <span>总结</span>
          </el-menu-item>
          <el-menu-item style="border-bottom: 1px solid rgb(229, 229, 229)">
            <span>总结</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="border: 1px solid rgb(229, 229, 229)">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<style lang="sass" scoped>
</style>